<template>
  <div class="hot-sider">
    <div class="title">
      <h1 class="title-text">账号设置</h1>
    </div>
    <div class="link-list">
      <div class="button-group">
        <a-button
          type="text"
          size="large"
          class="button-with-icon"
          :class="{ active: activeTab === 'setting' }"
          @click="navigateTo('setting')"
          ><template #icon><IdcardOutlined /></template>编辑资料</a-button
        >
        <a-button
          type="text"
          size="large"
          class="button-with-icon"
          :class="{ active: activeTab === 'password' }"
          @click="navigateTo('password')"
          ><template #icon><FileProtectOutlined /></template>修改密码</a-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import { IdcardOutlined, FileProtectOutlined } from "@ant-design/icons-vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const activeTab = ref<"setting" | "password">(
  route.path.includes("password") ? "password" : "setting"
);

const navigateTo = (tab: "setting" | "password") => {
  activeTab.value = tab;
  router.push(`/userSetting/${tab}`);
};
</script>

<style scoped>
.title-text {
  font-size: 20px;
  font-weight: 550;
}

.button-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

:deep(.button-with-icon .ant-btn-icon) {
  margin-right: 8px; /* 图标和文字之间留点空隙 */
}

:deep(.button-with-icon) {
  font-size: 16px !important;
  color: #333 !important;
  justify-content: flex-start; /* 内容左对齐 */
  text-align: left; /* 确保文字左对齐 */
  padding-left: 0; /* 去掉默认内边距影响对齐 */
}

:deep(.button-with-icon.active) {
  color: #398bfb !important;
}
</style>
